//取地址栏ID
const queryString = window.top.location.search;
const urlParams = new URLSearchParams(queryString);
const paramValue = urlParams.get('id');
//请求聊天的数据
let direction = '';
$.post(port + "chatmysql", function (data) {
    data = JSON.parse(data);
    data.module.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
    for (var i = 0; i < data.module.length; i++) {
        if (data.module[i].id == paramValue) {
            direction = 'right';
        } else {
            direction = 'left';
        }
        let div = `
            <div class="chat-message-${direction}">
                    <div class="chat-message-avatar-${direction}">
                        <img src='${data.module[i].avatar}' />
                    </div>
                    <div class="chat-message-content-${direction}">
                        <p><span>${data.module[i].name}</span></span><span class="chat-message-time-${direction}">${data.module[i].time}</span></p>
                        <p class="chat-message-text-${direction}">${data.module[i].chat}</p>
                    </div>
                </div>
            `
        $('#chatContent').append(div);
    }
    let scrollTop = $('#chatContent').prop('scrollHeight') - $('#chatContent').height();
    $('#chatContent').animate({ scrollTop: scrollTop }, 0);
});

//请求右侧的用户列表
$.post(port + 'userlist', function (data) {
    data = JSON.parse(data);
    for (let i = 0; i < data.module.length; i++) {
        //注册列表不展示自己
        if (data.module[i].id == paramValue) continue;
        let userDiv = `<li>
        <p class="userListImg"><img class="userImg" src="${data.module[i].avatar}" alt=""></p>
        <p class="userListName"><span class="userName">${data.module[i].name}</span><i class="userListId">${data.module[i].id}</i></p>
    </li>`;
        $('#userList').append(userDiv);
    }
    $('#userList').find('li').click(function (e) {
        let but = '加好友';
        let close = 'close';
        $.post(port + 'userdetail', { id: $(this).find('.userListId').text() }, function (data) {
            data = JSON.parse(data);
            $.post(port + 'FL', { paramValue }, function (data1) {
                data1 = JSON.parse(data1);
                for (let i = 0; i < data1.module.length; i++) {
                    if (data1.module[i].friend_id == data.module[0].id) {
                        but = '已是好友'
                        close = '';
                    }
                }
                let div = `
                        <div>
            <p class="chat-message-status-avatar">
                <img src="${data.module[0].avatar}" alt="">
            </p>
        </div>
        <div>
            <p>${data.module[0].name}</p>
            <p>账号:${data.module[0].account}</p>
            <p class="chat-message-status-id">注册ID:${data.module[0].id}</p>
            <p>个人简介:${data.module[0].resume}</p>
        </div>
        <div class="chat-message-status-btn">
            <input type="button" value="${but}" id="${close}">
        </div>
            `
                $('.chat-message-status').html(div);
                //加好友按钮
                $('#close').click(function (e) {
                    let friend_id = $('.chat-message-status-id').text().split(':')[1].trim();
                    let time = time1();
                    $.post(port + 'friendlist', { paramValue, friend_id, time }, function (data) {
                        data = JSON.parse(data);
                        if (data.code == 200) {
                            $('#close').attr('value', '已是好友');
                        }
                    })
                });
            })
        })
        $('.chat-message-status').stop().animate({ height: '320px' }, 200);
    });
    $('#showcase').click(function () {
        $('.chat-message-status').stop().animate({ height: '0' }, 200);
    });
})
$('.chat-loading').remove();

let blocked_keywords = ['操你妈', '滚', '艹', '你妈', 'sb', '傻逼', 'sb', '傻B', '煞笔', '屌']
//聊天功能
const socket = io(chatport);
let time = '';
$('#sendButton').click(function () {
    showMessage();
});
document.onkeydown = function (event) {
    if (event.keyCode == 13) {
        showMessage();
    }
}

socket.on('chatmessage', (dataa) => {
    let direction = dataa.user.id == paramValue ? 'right' : 'left';
    //接收消息
    let div = `
            <div class="chat-message-${direction}">
                    <div class="chat-message-avatar-${direction}">
                        <img src='${dataa.user.avatar}' />
                    </div>
                    <div class="chat-message-content-${direction}">
                        <p><span>${dataa.user.name}</span></span><span class="chat-message-time-${direction}">${time}</span></p>
                        <p class="chat-message-text-${direction}">${dataa.msg}</p>
                    </div>
                </div>
            `
    $('#chatContent').append(div);
    let scrollTop = $('#chatContent').prop('scrollHeight') - $('#chatContent').height();
    $('#chatContent').animate({ scrollTop: scrollTop }, 0);
})

function showMessage() {
    var message = $('#chatInputTextarea').val();
    if (message == '') return $('.promptBox').text('发送内容不能为空!!!').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
        $(this).animate({ width: '0', height: '0' }, 1000);
    });
    //检测是否有屏蔽词
    for (let i = 0; i < blocked_keywords.length; i++) {
        if (message.indexOf(blocked_keywords[i]) != -1) {
            return $('.promptBox').text('发送内容含有敏感词，请重新输入!!!').stop().animate({ 'width': '300px', 'height': '40px' }, 500, function () {
                $(this).animate({ width: '0', height: '0' }, 1000);
            });
        }
    }
    //发送时间
    time = time1();

    //发送消息
    $.post(port + "chat", { message, time, paramValue }, function (data) {
        data = JSON.parse(data);
        let userInfo = {
            avatar: data.module[0].avatar,
            name: data.module[0].name,
            id: data.module[0].id
        }
        socket.emit('userlogin', userInfo);
        socket.emit('chatmessage', message);
        $('#chatInputTextarea').val('');
    });
}